<template>
  <view>
    <view class="holdCoin-page">
      <HeaderNav></HeaderNav>

      <view class="holdCoin-conter">
        <view class="total-card">
          <view class="title"> CUSDT {{ i18n.h66 }} </view>
          <view class="num-item">
            <view v-if="isPrice" class="total"> {{ Balance || 0 }}</view>
            <view v-else class="nototal">***</view>
            <image
              @click="showPrice"
              v-if="isPrice"
              src="/static/images/eye.png"
              alt=""
              mode="widthFix"
              class="bg3"
            />
            <image
              @click="showPrice"
              v-if="!isPrice"
              src="/static/images/eyeoff.png"
              alt=""
              mode="widthFix"
              class="bg3"
            />
          </view>
          <view class="grid-item">
            <view class="item">
              <view>{{ i18n.h67 }} </view>
              <view v-if="isPrice">{{ AddUsdt || 0 }}</view>
              <view v-else>***</view>
            </view>

            <view class="item">
              <view>{{ i18n.h68 }} </view>
              <view v-if="isPrice">{{ Effective || 0 }}</view>
              <view v-else>***</view>
            </view>
          </view>
        </view>
        <view class="btn" @click="rulesModel = true">{{ i18n.h69 }} </view>
        <view class="tabheader">
          <view
            v-for="(nav, index) in tabList"
            :key="index"
            :class="nav.parmas == atvTab ? 'atvTab' : 'tabs'"
            @click="changTab(nav)"
          >
            {{ nav.name }}
          </view>
        </view>
        <view class="list-cont">
          <view class="row-header">
            <view>{{ i18n.h70 }} </view>
            <view>{{ i18n.h71 }} </view>
          </view>
          <view v-if="list.length > 0">
            <view class="row-item" v-for="(item, index) in list" :key="index">
              <view>{{ getTemp(item.createtime) }}</view>
              <view v-if="atvTab == 1">{{ item.usdt }} USDT</view>
              <view v-if="atvTab == 2">{{ item.amount }} USDT</view>
            </view>
          </view>
          <view v-else>
            <empty :MarginT="100"></empty>
          </view>
        </view>
      </view>
    </view>

    <FooterNav :modelKey="3" />
    <u-popup
      :show="rulesModel"
      @close="rulesModel = false"
      round="24"
      mode="center"
    >
      <view class="rule-mod">
        <view class="headers">
          <view>{{ i18n.h54 }}</view>
          <image
            src="/static/images/close.png"
            alt=""
            @click="rulesModel = false"
          />
        </view>
        <view v-html="i18n.h159" class="cont"></view>
        <view class="btn" @click="closeRule()">{{ i18n.h135 }}</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import HeaderNav from "../../components/header-nav/header-nav.vue";
import FooterNav from "@/components/footer-nav/footer-nav.vue";
import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import config from "@/config/index.js";

import {
  getHoldDataApi,
  getHoldSnapshotApi,
  getHoldRewardtApi,
} from "@/api/module/home";
import {} from "@/common/wb3";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  props: {},
  data() {
    return {
      rulesModel: false, // 玩法规则
      total_price: 22999000,
      isPrice: true,
      list: [],
      resultList: [],
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        totalPage: 1,
      },
      atvTab: "1",
      AddUsdt: "",
      Balance: "",
      Effective: "",
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
    tabList() {
      return [
        {
          //name: "Snapshot record",
          name: this.$t("home.h72"),
          parmas: "1",
        },
        {
          // name: "Award record",
          name: this.$t("home.h73"),
          parmas: "2",
        },
      ];
    },
  },

  onShow() {
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
      this.getList();
    },
    getInfo() {
      getHoldDataApi().then((res) => {
        if (res.code == 0) {
          this.AddUsdt = res.data.AddUsdt; //地址USDT余额
          this.Balance = res.data.Balance; //CUSDT余额
          this.Effective = res.data.Effective; //有效USDT余额
        }
      });
    },
    getList() {
      if (this.atvTab == 1) {
        console.log("快照记录");
        getHoldSnapshotApi().then((res) => {
          if (res.code == 0) {
            this.list = res.data || [];
          }
        });
      } else {
        console.log("奖励记录");
        getHoldRewardtApi().then((res) => {
          if (res.code == 0) {
            this.list = res.data;
          }
        });
      }
    },

    showPrice() {
      this.isPrice = !this.isPrice;
    },
    closeRule() {
      this.rulesModel = false;
    },
    changTab(nav) {
      this.atvTab = nav.parmas;
      this.list = [];
      this.resultList = [];
      this.page.totalPage = 1;
      this.page.total = 0;
      this.getList();
    },

    copy() {
      uniCopy({
        content: this.address,
        success: (res) => {
          uni.showToast({
            title: this.$t("home.h25"),
            icon: "none",
          });
          this.shareModel = false;
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },

    toPage(path) {
      if (path !== "") {
        uni.navigateTo({
          url: path,
        });
      }
    },
    toLink(path) {
      window.open(path, "_blank");
    },
    toRecord(type) {
      uni.navigateTo({
        url: `/pages/home/record?type=${type}`,
      });
    },
    number2string(num) {
      num = String(num);
      var eSplit = num.split("e");
      var e = +(eSplit[1] || 0);
      var pad = "0".repeat(500);
      var numSplit = eSplit[0].split(".");
      var str;
      var numSplit1 = numSplit[1] || "";
      if (e < 0) {
        str = "0." + (pad + numSplit[0]).slice(e) + numSplit1;
      } else {
        str =
          numSplit[0] +
          (numSplit1 + pad).slice(0, e) +
          "." +
          numSplit1.slice(e);
      }
      return (
        str
          .replace(/\.?0*$/, "")
          .replace(/^0*/, "")
          .replace(/^\./, "0.") || "0"
      );
    },
    getTemp(timestamp) {
      // let timestamp = 1662537367
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        " " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
      // let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
      // 时间戳

      console.log(GMT); // 2022-09-07 15:56:07
    },
    getCaption(strings) {
      var strLength = strings.length;
      var shortName = strings.substring(0, 2);
      var shortName2 = strings.substring(strLength - 4, strLength);
      let str = `${shortName}...${shortName2}`;
      return str;
    },
  },
};
</script>
 <style lang="scss" scoped>
.holdCoin-page {
  .holdCoin-conter {
    padding: 0 32rpx 120rpx;
    .total-card {
      min-height: 380rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 32rpx;

      background: #f8fafc;
      border-radius: 30rpx;
      border: 2rpx solid #e3e8ef;
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #97a3b6;
      }
      .num-item {
        display: flex;
        align-items: center;
        .total {
          font-weight: 600;
          font-size: 64rpx;
          color: #000000;
        }
        .nototal {
          font-weight: bold;
          font-size: 64rpx;
          color: #000000;
          height: 96rpx;
          line-height: 120rpx;
        }
        image {
          margin-left: 10rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
      .grid-item {
        display: grid;
        grid-template-columns: 49% 49%;
        justify-content: space-between;
        .item {
          padding: 24rpx;
          background: #ffffff;
          border-radius: 16rpx;
          border: 2rpx solid #ebecef;
          :nth-child(1) {
            font-weight: 400;
            font-size: 24rpx;
            color: #97a3b6;
          }
          :nth-child(2) {
            margin-top: 16rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
          }
        }
      }
    }
    .btn {
      margin: 32rpx 0;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 100rpx;
      color: #ffffff;
      font-size: 28rpx;
      text-align: center;
      color: #835bf1;
      background: #f5f3fe;
      border: 2rpx solid #dcd6fb;
    }
    .tabheader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border-radius: 20rpx;
      padding: 10rpx;
      view {
        flex: 1;
        text-align: center;
        height: 64rpx;
        line-height: 64rpx;
      }
      .atvTab {
        width: 319rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #835bf1;
        background: #ffffff;
        border-radius: 16rpx;
      }
      .tabs {
        font-weight: 400;
        font-size: 28rpx;
        color: #97a3b6;
      }
    }
    .list-cont {
      margin-top: 28rpx;
      .row-header {
        padding: 16rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #97a3b6;
        }
      }
      .row-item {
        margin-bottom: 16rpx;
        padding: 26rpx 24rpx;
        background: #f8fafc;
        border-radius: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
          font-size: 24rpx;
          color: #000000;
        }
        :nth-child(1) {
          font-weight: 400;
        }
        :nth-child(2) {
          font-weight: 500;
        }
      }
    }
  }
}
</style>
